<template>
  <view class="member">
    <button class="member__reg" @click="regMember">邀请成员</button>
    <button class="member__add" @click="addMember">新增成员</button>
    <block v-if="memberList.length">
      <view style="font-size: 18px;">人员列表：</view>
      <view
        class="member__list"
        v-for="(memberListVal, memberListIdx) in memberList"
        :key="memberListIdx"
      >
        <text class="member__name">{{memberListVal.person_name}}</text>
        <button size="mini" class="btn" @click="modifyMember(memberListVal._id)">修改</button>
        <button size="mini" class="btn" @click="delelteMember(memberListVal._id, memberListIdx)">删除</button>
      </view>
    </block>
    <view v-else class="empty">当前团队没有人员，请添加成员</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAddMember: false,
      memberList: []
    };
  },
  onShow() {
    uniCloud.callFunction({
      name: "ha_get_member",
      data: {
        group_id: this.$route.query.group_id
      },
      success: ({ result }) => {
        if (result.code === -1) {
          this.isAddMember = true;
        } else if (result.code === -2) {
          uni.showModal({
            title: "提示",
            content: result.msg,
            success: function(res) {
              if (res.confirm) {
                uni.redirectTo({
                  url: "../index/index"
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        } else {
          this.memberList = result.data;
        }
        console.log(result);
      }
    });
  },
  methods: {
    addMember() {
      uni.navigateTo({
        url: `./create_member?group_id=${this.$route.query.group_id}`
      });
    },
    regMember() {
      uni.navigateTo({
        url: `./member_register?group_id=${this.$route.query.group_id}`
      });
    },
    modifyMember(memberId) {
      uni.navigateTo({
        url: `./modify_member?group_id=${this.$route.query.group_id}&member_id=${memberId}`
      });
    },
    delelteMember(memberId, memberIdx) {
      console.log(memberId);

      uniCloud.callFunction({
        name: "ha_del_member",
        data: {
          memberId
        },
        success: ({ result }) => {
          console.log(result);
          if (result.code === -1 || result.code === -2) {
            uni.showToast({
              icon: "none",
              title: result.msg
            });
          } else {
            uni.showToast({
              icon: "success",
              title: `${result.msg}`
            });

            this.memberList.splice(memberIdx, 1);
          }
        }
      });
    }
  }
};
</script>

<style lang="less">
uni-page-body {
  height: 100%;
}

.member {
  height: 100%;
  position: relative;
  padding: 10rpx;
}

.member__add .member__reg {
  background-color: #007aff;
  color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.empty {
  width: 100%;
  color: #666666;
  position: absolute;
  left: 50%;
  bottom: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.member__list {
  display: flex;
}
.member__name {
  flex: 1;
}
.member__list button {
  margin-left: 10rpx;
}
</style>
